<template>
  <div class="preview" :style="{ padding: form.name ? '7px 16px 16px' : '16px' }">
    <el-tooltip v-if="form.name" :content="form.name" placement="top" effect="light">
      <div class="form-label">
        {{ form.name }}
      </div>
    </el-tooltip>
    <el-input
      v-if="form.type === 'text'"
      v-model.trim="value"
      :placeholder="form.placeholder ? form.placeholder : '请输入内容'"
      :maxlength="50"
      show-word-limit
    ></el-input>
    <el-input
      type="textarea"
      :rows="2"
      :maxlength="300"
      show-word-limit
      v-if="form.type === 'multi-text'"
      v-model.trim="value"
      :placeholder="form.placeholder ? form.placeholder : '请输入内容'"
    ></el-input>
    <el-radio-group v-if="form.type === 'radio' && styleType === 'tile'" v-model="value">
      <el-radio :label="item.key" v-for="item in options" :key="item.key">{{ item.value }}</el-radio>
    </el-radio-group>
    <el-select
      v-if="(form.type === 'multi-select' || form.type === 'radio') && styleType === 'dropdown'"
      v-model="value"
      :multiple="form.type === 'multi-select'"
      :placeholder="form.placeholder ? form.placeholder : '请选择'"
      :options="options"
      style="width: 100%"
      clearable
      filterable
    >
      <el-option v-for="item in options" :key="item.key" :label="item.value" :value="item.key"> </el-option>
    </el-select>
    <div v-if="form.type === 'multi-select' && styleType === 'tile'">
      <el-checkbox v-for="item in options" :key="item.key" :label="item.key" v-model="item.isDefault">{{
        item.value
      }}</el-checkbox>
    </div>
    <el-input-number size="mini" v-if="form.type === 'number'" v-model="value" step-strictly :step="1" :min="1"> </el-input-number>
    <el-cascader
      v-if="form.type === 'cascade'"
      clearable
      style="width: 100%"
      filterable
      v-model="value"
      :options="options.children"
      :props="caProps"
      collapse-tags
      :placeholder="form.placeholder ? form.placeholder : '请选择'"
    >
    </el-cascader>
    <el-date-picker
      v-if="form.type === 'datetime' && styleType === 'day'"
      v-model="value"
      type="date"
      :placeholder="form.placeholder ? form.placeholder : '请选择日期'"
    >
    </el-date-picker>
    <el-date-picker
      v-if="form.type === 'datetime' && styleType === 'second'"
      v-model="value"
      type="datetime"
      :placeholder="form.placeholder ? form.placeholder : '请选择日期时间'"
    >
    </el-date-picker>
    <el-date-picker
      v-if="form.type === 'datetime-range' && styleType === 'day'"
      v-model="value"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <el-date-picker
      v-if="form.type === 'datetime-range' && styleType === 'second'"
      v-model="value"
      type="datetimerange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <template v-if="form.type === 'pairs'">
      <div v-for="(item, index) in group" :key="index" class="more-input">
        <el-input
          v-model.trim="item.value"
          clearable
          :placeholder="form.placeholder ? form.placeholder : '请输入内容'"
          :maxlength="50"
        />
        <el-input
          v-model.trim="item.memo"
          clearable
          placeholder="请输入备注"
          style="margin-left: 16px"
          :maxlength="50"
        />
        <span
          v-if="group && group.length && index === 0"
          class="el-icon-plus"
          style="color: var(--mc-main-color)"
          @click="add"
        ></span>
        <span v-else @click="remove(index)" class="el-icon-delete"></span>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: 'PreviewCom',
  data() {
    return {
      value: null,
      group: [{}]
    }
  },
  props: {
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {
    styleType() {
      if (this.form.style) {
        return this.form.style
      }
      return 'dropdown'
    },
    fillLevel() {
      if (this.form.type === 'cascade') {
        return Boolean(this.form.options && this.form.options.fillLevel)
      } else {
        return false
      }
    },
    options() {
      if (this.form.type === 'cascade') {
        return this.form.options
      } else {
        return (this.form.choices || []).filter((v) => v.value !== '')
      }
    },
    caProps() {
      return {
        checkStrictly: !this.fillLevel,
        label: 'value',
        value: 'key',
        multiple: !this.fillLevel && this.styleType === 'multi'
      }
    }
  },
  methods: {
    resetData() {
      this.value = null
    },
    add() {
      if (this.group && this.group.length > 9) {
        return this.$message.error('最多允许添加10个')
      }
      this.group.push({})
    },
    remove(index) {
      this.group.splice(index, 1)
    },
    setData(data) {
      this.value = null
      if (this.form.type === 'multi-select') {
        // 多选初始化值为[]
        this.value = []
      }
      this.$nextTick(() => {
        if (data && data.length) {
          data.forEach((item) => {
            if (this.form.type === 'radio' && item.isDefault) {
              // 单选默认赋值
              this.value = item.key
            } else if (this.form.type === 'multi-select' && item.isDefault) {
              // 多选默认赋值
              this.value.push(item.key)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
.preview
  background #fafafa
  border-radius 4px
  .form-label
    width 496px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  :deep(.el-cascader)
    width 100%
  :deep(.el-input)
    width 100%
  :deep(.el-input__wrapper)
    width 100%
    box-sizing border-box
  .more-input
    display flex
    align-items center
    margin-bottom 8px
    &:last-child
      margin-bottom: 0
    span
      cursor pointer
      margin-left 16px
      &.el-icon-delete
        color rgba(0, 0, 0, 0.38)
</style>
